<template>
  <view class="live-back-container p-[30rpx] box-border bg-white">
    <view class="mb-[30rpx]">
      <uni-easyinput
        prefixIcon="search"
        v-model="keyword"
        placeholder="输入关键词……"
        :inputBorder="false"
        :placeholderStyle="{ color: '#999', fontSize: '28rpx' }"
        primaryColor="#1e92f0"
        :styles="{ borderColor: '#fff' }"
        @iconClick="onSearch"
      >
      </uni-easyinput>
    </view>
    <view class="live-item" v-for="(item, index) in list" :key="index">
      <videoItem
        :videoContent="item"
        :showTime="false"
        :showShare="false"
        showBack
      ></videoItem>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

const keyword = ref("");
const list = reactive([
  {
    collectTime: "2025年2月14日",
    videoPoster:
      "https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
  {
    collectTime: "2025年2月14日",
    videoPoster:
      "https://img1.baidu.com/it/u=2106142011,1410854447&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=26d84943f61687a3f3e58b83205966cd",
    videoTitle: "这是一个视频标题",
    videoContent:
      "文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍文案介绍",
    videoAvatar:
      "https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741798800&t=2308445923a7b878526f3e17e7f7d6e2",
    videoAuthor: "法官",
    time: "2025年2月13日 22:23:54",
  },
]);
const onSearch = () => {
  console.log("搜索");
};
</script>

<style lang="scss" scoped>
.live-back-container {
  min-height: calc(100vh - 110rpx - 148rpx);

  :deep(.uni-input-input) {
    background: #f7f7f9;
  }
  :deep(.uni-easyinput__content) {
    background: #f7f7f9;
    border-radius: 16rpx;
  }
  :deep(.uni-easyinput__content-input) {
    border-radius: 0 16rpx 16rpx 0;
  }
  :deep(.uniui-search) {
    content: url("@/static/images/icon-search.png");
    width: 30rpx;
    height: 30rpx;
  }
  .live-item:last-child {
    margin-bottom: 0;
  }
}
</style>
